<!--
 * @Description: 设置员工角色列表弹窗组件 重复组件
 * @version: 电子名片2.0
 * @Author: 付小清
 * @Date: 2020-12-04 18:24:41
 * @LastEditors: 付小清
 * @LastEditTime: 2020-12-16 10:43:52
-->

<template>
  <el-dialog title="角色列表" :visible.sync="_isShow" :close-on-click-modal="false">
    <el-form
      :inline="true"
      :size="size"
      :model="formInline"
      :validate-on-rule-change="false"
      class="demo-form-inline"
    >
      <el-form-item>
        <el-input v-model="formInline.keyword" placeholder="角色名称" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">查询</el-button>
        <el-button type="default" @click="onReset">重置</el-button>
      </el-form-item>
    </el-form>
    <!-- 表格 -->
    <el-table
      ref="refTable"
      v-loading="loading"
      :data="tableData"
      style="width: 100%"
      :border="true"
      :size="size"
      :highlight-current-row="true"
      :header-cell-style="headerCellStyle"
      @selection-change="selectionChange"
    >
      <el-table-column type="selection" width="55" align="center" />
      <!-- <el-table-column label="序号" type="index" width="50" /> -->
      <el-table-column
        v-for="(item, index) in _tableColumn"
        :key="index"
        :prop="item.prop"
        :label="item.label"
      />
    </el-table>
    <!-- 翻页 -->
    <el-pagination
      background
      layout="total, sizes, prev, pager, next, jumper"
      :current-page="pageInfo.current"
      :page-sizes="sizes"
      :page-size="pageInfo.size"
      :total="pageInfo.total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="onSave"> 保存 </el-button>
      <el-button @click="_isShow = false">取 消</el-button>
    </div>
  </el-dialog>
</template>

<script>
// 页面配置
import { roleJClumen } from '../count.js'
// 接口
import { permissionRole, empRoleAssignment } from '@/api/system'
export default {
  props: {
    show: {
      type: Boolean,
      default: false
    },
    // 选中
    staffList: {
      type: Array,
      default: () => {
        return []
      }
    },
    // 选中
    roleList: {
      type: Array,
      default: () => {
        return []
      }
    }
  },
  data() {
    return {
      pageInfo: {
        current: 1, // 页数
        size: 20, // 大小
        total: 0 // 总数
      },
      sizes: [20, 50, 100],
      loading: false,
      headerCellStyle: {
        background: '#eef1f6',
        color: '#606266',
        textAlign: 'center'
      },
      formInline: {
        keyword: ''
      },
      tableData: [],
      selectionList: []
    }
  },
  computed: {
    size() {
      return this.$store.getters.size
    },
    _tableColumn: {
      get() {
        return roleJClumen
      },
      set(value) {
        this.$emit('update:roleJClumen', value)
      }
    },
    _isShow: {
      get() {
        return this.show
      },
      set(val) {
        this.$emit('update:show', val)
      }
    }
  },
  watch: {
    show: {
      handler(val) {
        if (val) {
          this.toggleRowSelection()
        }
      }
    }
  },
  mounted() {
    this.getList()
  },
  methods: {
    selectionChange(val) {
      this.selectionList = val
    },
    toggleRowSelection() {
      if (this.roleList.length) {
        this.$nextTick(() => {
          this.tableData.forEach((row, i) => {
            let status = true
            this.roleList.forEach((item) => {
              if (JSON.stringify(row) === JSON.stringify(item)) {
                status = false
              }
            })
            if (status) {
              this.$refs.refTable.toggleRowSelection(this.tableData[i], false)
            } else {
              this.$refs.refTable.toggleRowSelection(this.tableData[i], true)
            }
            // if (this.roleList.indexOf(row) >= 0) {
            //   this.$refs.refTable.toggleRowSelection(row, true)
            // } else {
            //   this.$refs.refTable.toggleRowSelection(this.tableData[i], false)
            // }
          })
        })
      }
    },
    // 查询
    onSubmit() {
      this.getList()
    },
    // 重置
    onReset() {
      for (const x in this.formInline) {
        // 参数是空删除
        this.formInline[x] = ''
      }
      this.getList()
    },
    onSave() {
      const staffChecks = this.staffList.map((item) => item.userId)
      const roleChecks = this.selectionList.map((item) => item.roleId)

      empRoleAssignment({
        userIds: staffChecks,
        roleIds: roleChecks
      }).then((res) => {
        this.$message({ message: '添加角色成功', type: 'success' })
        this.$emit('refresh')
      })
      this._isShow = false
    },
    // 当前页数
    handleSizeChange(e) {
      this.pageInfo.size = e
      this.getList()
    },
    // 当前大小
    handleCurrentChange(e) {
      this.pageInfo.current = e
      this.getList()
    },
    // 列表请求
    async getList() {
      const params = {
        keyword: this.formInline.keyword,
        current: this.pageInfo.current,
        size: this.pageInfo.size
      }
      try {
        const { data } = await permissionRole(params)
        // 翻页
        this.tableData = data.list
        this.pageInfo.total = data.total || 0
        this.loading = false
      } catch (e) {
        console.warn(e)
        // 出错返回信息
        this.tableData = []
        this.loading = false
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.el-pagination {
  margin-top: 15px;
  text-align: right;
}
</style>
